<template>
	<view>
		<view class="list" >
			<view class="box" :class="'bg'+index" @click="form(item.id)" v-for="(item,index) in cateList" :key="item.id">
				<image class="pic" :src="item.pic" mode="widthFix"></image>
				{{item.cate_name}}
			</view>
		</view>

		<tabBarH></tabBarH>
		<tabBar v-if="!is_diy" :pagePath="'/pages/other/draft/draft_publish'"></tabBar>
		<pageFooter v-else></pageFooter>
	</view>
</template>

<script>
	let that;
	// #ifdef APP-PLUS
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	// #endif
	// #ifndef APP-PLUS
	let sysHeight = 0
	// #endif
	import {
		toLogin
	} from '@/libs/login.js';
	import tabBar from "@/pages/index/visualization/components/tabBar.vue"
	import tabBarH from '@/components/tabBarH';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	// #ifdef MP
	// import authorize from '@/components/Authorize';
	// #endif
	import draft from "@/pages/index/mydiy/components/draft";
	import pageFooter from '@/components/pageFooter/index.vue'
	import colors from "@/mixins/color";
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			pageFooter,tabBar,draft,tabBarH
		},
		mixins: [colors],
		data(){
			return {
				is_diy: uni.getStorageSync('is_diy'),
				cateList: []
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad(){
			that = this;
			uni.hideTabBar()
		},
		onShow(){
			if (!this.isLogin) return toLogin();
			that.getCateList();
		},
		methods:{
			getCateList(){
				this.$http.get("v1/getCateList").then(res=>{
					this.cateList = res.data.cateList;
				})
			},
			form(publishType){
				that.$tool.navto("/pages/other/draft/draft_form?cid="+publishType);
			},
			// 授权关闭
			authColse(e) {
				this.isShowAuth = e;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		/* #ifdef MP */
		// height: calc(100vh - 176rpx - 40rpx);
		/* #endif */
		// #ifdef H5
		// height: calc(100vh - 176rpx);
		// #endif
		overflow-y: scroll;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		margin-top: 100rpx;
		.box{
			width: 440rpx;
			padding: 36rpx 0;
			margin-top: 20rpx;
			font-size: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			&:last-child{
				margin-bottom: 20rpx;
			}
			.pic{
				width: 60rpx;
				margin-right: 20rpx;
			}
		}
		.bg0{
			background-color: #E7D0BD;
		}
		.bg1{
			background-color: #DFE0D2;
		}
		.bg2{
			background-color: #93DCFF;
		}
		.bg3{
			background-color: #ff7244;
		}
		.bg4{
			background-color: #f5bf70;
		}
		.bg5{
			background-color: #B6ACB4;
		}
		.bg6{
			background-color: #c1adcb;
		}
		.bg7{
			background-color: #98B5C9;
		}
	}

</style>